<template>
  <div id="expense">
    <scroller class="pointstagli" scrollbar-y lock-x :scroll-bottom-offset="60" @on-scroll-bottom="onScrollBottom1" slot="slist1" ref="scrollerBottom1">
      <div class="mb-msg">
        <div class="mb-msg-t">
          <div class="photograph" ><img :src="data1.head_img_url"></div>
          <p class="name">{{ data1.nick_name }}</p>
          <p class="phone">{{ data1.mobile }}</p>
        </div>
          <ul class="ex-list">
            <li class="list" v-for="item in lists1" @click="routeto('lineitem', {id: item.id})">
              <div class="ex-num">
                <div class="left">
                  <span>订单号:</span>
                  <span>{{item.orderNo}}</span>
                </div>
                <div class="right time">
                  <span>{{item.transTime}}</span>
                  <!-- <span>{{item.time}}</span> -->
                </div>
              </div>
              <div class="ex-sum">
                <p class="left">
                  <span>消费金额:</span>
                  <span>￥{{item.payAmount}}</span>
                </p>
                <p class="right open" v-if="item.evaluateStatus === 0" @click.stop="routeto('appraise', {
                  oid: item.orderNo,
                  mid: '',
                  brandid: '1',
                  sid: item.storeCode
                })">
                  <span>评价</span>
                </p>
                <p class="right close" v-else-if="item.evaluateStatus === 1">
                  <span>已评价</span>
                </p>
              </div>
              <!-- <div class="ex-total">
                <span>获得积分:</span>
                <span>{{item.getPoints}}</span>
              </div> -->
            </li>
          </ul>
      </div>
      <load-more :value="false" :show-loading="isshowload" :tip="loadtip">Loading</load-more>
    </scroller>
  </div>
</template>
<script>
  import { Scroller, LoadMore } from 'vux'
  export default {
    name: 'expense',
    components: {
      Scroller,
      LoadMore
    },
    data () {
      return {
        isupload: false,
        isshowload: false,
        loadtip: '',
        bottomCount1: 0,
        lists1: [],
        expList: {},
        pageIndex: 0,
        data1: {}
      }
    },
    created () {
      this.getInfo()
      this.getList()
      .then((data) => {
        this.lists1.push.apply(this.lists1, data)
        if (data.length > 0) {
          this.bottomCount1 = this.lists1.length
        }
      }, () => {})
    },
    methods: {
      // 获取用户信息
      getInfo () {
        this.$axios.post(this.apidomain + '/api/cust/getFansInfoByOpenId/' + this.getCookie('appid'), {
          openId: this.getCookie('openid')
        })
        .then((response) => {
          if (response.data.errorCode === '0') {
            this.data1 = response.data.data
          }
        })
        .catch((error) => {
          console.log(error)
        })
      },
      getList: function (lastnumber, type) {
        return this.$axios.post(this.apidomain + '/api/order/getCustOrderRecord/' + this.getCookie('appid'), {
          openId: this.getCookie('openid'),
          pageIndex: this.bottomCount1
        })
        .then((response) => {
          return response.data.data
        })
        .catch(function (error) {
          console.log(error)
          return []
        })
      },
      onScrollBottom1 () {
        if (this.isupload) {
          this.isshowload = true
          this.loadtip = '加载中...'
        } else {
          this.isupload = true
          setTimeout(() => {
            this.$nextTick(() => {
              this.getList(this.bottomCount1, 'usable')
              .then((data) => {
                this.lists1.push.apply(this.lists1, data)
                if (data.length > 0) {
                  this.bottomCount1 = this.lists1.length
                }
              }, () => {})
              this.$refs.scrollerBottom1.reset()
              this.isshowload = false
              this.loadtip = ''
              this.isupload = false
            })
          }, 1000)
        }
      }
    }
  }
</script>
<style lang="less">
  @import "../../assets/less/expense/expense.less";
</style>
